import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
//引入请求的action
import { getMovieAction } from '../../store/slice/movieSlice'


export default function Movie() {
  //创建dispatch
  const dispatch = useDispatch()
  //这里测试，action中内容可以打印就可以获取数据了

  const count = useSelector(state => state.count.count)
  const movieList = useSelector(state => state.movie.movieList)
  console.log(movieList, 'movielist');


  const getMovieHandle = () => {
    dispatch(getMovieAction())
  }


  return (
    <div>
      <br />
      <h2>与count通讯，这里数字是【{count}】</h2>
      <br />
      <h2>电影列表</h2>
      <button onClick={getMovieHandle}>点击获取电影信息</button>

      <ul>
        {
          movieList.map(item => {
            return <li key={item.tvId}>
              {item.albumName}
            </li>
          })
        }
      </ul>
    </div>
  )
}
